<template>
  <div   >

    <div class="form-warp">
      <span class="form-tips">基础信息</span>
      <AvatarUploader :tips="上传头像" />
      <el-form :model="driverFrom" class="form"  :label-position="right"  label-width="100px">
        <el-row>
        <el-col :span="8">
          <el-form-item label="姓名">
            <el-input style="width: 200px" v-model="driverFrom.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="8">
          <el-form-item label="手机号码">
            <el-input style="width: 200px" v-model="driverFrom.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>

        </el-col>
        <el-col :span="8">
          <el-form-item label="出生年月">
            <el-date-picker type="date" placeholder="请选择出生年月" v-model="driverFrom.birthday" style="width: 200px;"></el-date-picker>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="车辆">
              <CarSelect :value.sync="driverFrom.cid"/>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证号码">
              <el-input style="width: 200px" v-model="driverFrom.idcardNumber" placeholder="请输入身份证号码"></el-input>
            </el-form-item>
          </el-col>
          <el-col  :span="8">
            <el-form-item label="驾驶证编号">
              <el-input style="width: 200px" v-model="driverFrom.driverLicense" placeholder="请输入驾驶证编号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
     </el-form>
    </div>
    <div class="form-warp" >
      <span class="form-tips">高级信息</span>
      <el-form   :model="driverFrom" class="form">
        <div style="display: flex;justify-content: center">
          <el-form-item label="自动接单" style="flex: 1">
            <el-switch
              v-model="driverFrom.autoReceive"
              active-value="1"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item label="语音通知" style="flex: 1">
            <el-switch
              v-model="driverFrom.voiceNotice"
              active-color="#13ce66"
              active-value="1"
              inactive-value="0"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <el-form-item label="是否启用" style="flex: 1">
            <el-switch
              v-model="driverFrom.isuse"
              active-color="#13ce66"
              active-value="1"
              inactive-value="0"
              inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
          <div style="flex: 1">
            <el-form-item label="工作时间" >
              <el-time-picker
                is-range
                v-model="driverFrom.workTime"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </div>

        </div>

      </el-form>
    </div>
    <div class="form-warp" >
      <span class="form-tips">证件信息</span>
      <div style="display: flex;justify-content: center">
        <div class="flies-item">
          <span class="title">身份证正面照片</span>
          <DragUpload :imageUrl.sync="driverFrom.idcardFace" />
        </div>
        <div class="flies-item">
          <span>身份证背面照片</span>
          <DragUpload :imageUrl.sync="driverFrom.idcardBack"/>
        </div>
        <div class="flies-item">
          <span>手持身份证照片</span>
          <DragUpload :imageUrl.sync="driverFrom.idcardHand"/>
        </div>

      </div>
    </div>

    <div style="width: calc( 100%  );height: 45px;position: fixed;bottom: 5px;background: white; display: flex;justify-content: center;border-top: 1px solid #e6e6e6;padding: 5px;" >
      <el-button type="warning" style="width: 300px" @click="$router.go(-1)">返回</el-button>
       <el-button type="primary" @click="save" style="width: 300px;margin-right: 100px">保存</el-button>
    </div>
  </div>
</template>

<script>
  import {edit} from '@/api/driver'
  import CarSelect from '@/components/CarSelect'
  import DragUpload from '@/components/DragUpload'
  import AvatarUploader from '@/components/AvatarUploader'
export default {
  components:{
    CarSelect,  DragUpload, AvatarUploader
  },
  data(){
    return {
      carTypes:[],
      driverFrom:{},
    }
  },
  computed: {
  },
  methods:{

    save(){
      edit(this.driverFrom).then(res => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.$router.go(-1)
      })
    }
  }
}
</script>

<style scoped>
  .e{
    color: red;
  }
  .form{
    padding: 15px 15px 0px 15px;
  }
  .data-item{
     margin-right: 15px;
  }
  .data-item span{
    color: #2d2f33;
    font-size: 12px;
  }
  .data-item .title{
    color: #001528;
    margin-right: 8px;
    font-size: 16px;
  }
  .form-warp{
    border: 1px solid #e0e0e0;
    margin:10px 30px;
  }
  .form-tips{
    display:-webkit-box;
    background: #e6e6e6;
    padding: 10px 8px;
    color: #c0c4cc;
    font-size: 12px;
  }
  .flies-item{
    margin: 15px;
    display: grid;
    justify-items: center;
  }
  .flies-item .title{
    padding: 5px;
  }
</style>
